<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';

defineOptions({
  name: 'home',
});

definePageMeta({
  layout: 'default-home',
  name: 'home',
  title: 'home',
  i18n: 'menu.home',
});
const { t, locale } = useI18n();
const active = ref(0);
const showRight = ref(false);

const menuList = reactive([
  { title: t("home_page.leftMenu.hots"), icon: 'fire-o' },
  { title: t("home_page.leftMenu.favorite"), icon: 'like-o' },
  { title: t("home_page.leftMenu.slots"), icon: 'gift-o' },
  { title: t("home_page.leftMenu.chess"), icon: 'smile-o' },
  { title: t("home_page.leftMenu.fish"), icon: 'gem-o' },
  { title: t("home_page.leftMenu.person"), icon: 'contact-o' },
  { title: t("home_page.leftMenu.sport"), icon: 'flag-o' },
  { title: t("home_page.leftMenu.lottery"), icon: 'balance-o' },
]);

const swipeList = reactive([
  { url: '~/assets/images/1.jpg' },
  { url: '~/assets/images/2.jpg' },
  { url: '~/assets/images/3.jpg' },
  { url: '~/assets/images/4.jpg' },
]);

const lang = reactive([
  { txt: '中文', value: 'zh-CN', highlighted: false },
  { txt: 'English', value: 'en-US', highlighted: false },
  { txt: '缅甸语', value: 'mm', highlighted: false },
]);

const changeLang = (selectedLang: string) => {
  if (['en-US', 'zh-CN','mm'].includes(selectedLang)) {
    locale.value = selectedLang as 'en-US' | 'zh-CN'| 'mm';
    lang.forEach(item => {
      item.highlighted = item.value === selectedLang;
    });
  } else {
    console.error('Unsupported language:', selectedLang);
  }
  showRight.value = false;
};
//火热和收藏就3列显示，其他一列
const columnNum = computed(() => {
  return active.value === 0 || active.value === 1 ? 3 : 1;
});
const goDetail = (item: any) => {
}
const getGame = (item: any, index: number) => {
  active.value = index
}
</script>

<template>
 <div></div>
</template>

<style lang="css" scoped>
::v-deep .van-grid-item__content {
  padding: 0 !important;
}

.van-notice-bar {
  background: transparent;
  padding: 10px 0;
}

.active-menu-item {
  border-color: red;
  font-weight: bold;
  color: red;
}
</style>